<template>
  <div class="subject-render item-to-top" :title="slotData.subject">
    <div class="left">
      <!-- 重要程度 -->
      <span class="important-level" v-if="isShowImportantLevel" :class="importantClass">
        <span v-if="slotData.applicationCategoryKey === 4">{{
          importantLevelText[slotData.importantLevel]
        }}</span>
      </span>
      <!-- 密级 -->
      <span v-if="hasSecretLevel" style="float: left; color: red">
        [{{ slotData.secretLevel }}]
      </span>
      <span class="subject-render-title">{{ slotData.title || slotData.subject }}</span>
      <span class="attachment-color" :class="[hasAttachments, meetingNature]"></span>
      <span :class="authority"> </span>
      <!-- <span v-if="slotData.hasAttachments === true" class="ico16 affix_16"></span>
        <span v-if="slotData.meetingNature === '2'" class="ico16 bodyType_videoConf_16"></span> -->
      <span v-if="collBodyType !== 'html_16'" :class="collBodyType"></span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SubjectTitle',
    props: {
      slotData: {
        type: Object,
        default: () => {}
      },
      urlParams: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      hasSecretLevel() {
        return this.slotData.secretLevel;
      },
      isShowImportantLevel() {
        const { importantLevel } = this.slotData;
        const importArr = [2, 3, 4, 5];
        return importantLevel && importArr.includes(importantLevel);
      },
      importantClass() {
        const { applicationCategoryKey, importantLevel } = this.slotData;
        console.log(applicationCategoryKey, 'applicationCategoryKeyapplicationCategoryKey');
        if (applicationCategoryKey === 4 && importantLevel) {
          return `important-level important-level-${importantLevel}`;
        } else if (applicationCategoryKey !== 4) {
          // return `important${importantLevel}_16`;
          let iconImportant = importantLevel - 1;

          return `icon-font important-icon-color xicon-important${iconImportant}`;
        } else {
          return '';
        }
      },
      hasAttachments() {
        const { hasAttachments } = this.slotData;
        if (hasAttachments) {
          return 'xicon-affix';
        } else {
          return '';
        }
      },
      meetingNature() {
        const { meetingNature } = this.slotData;
        if (meetingNature === '2') {
          return 'xicon-meeting-video';
        } else {
          return '';
        }
      },
      //表单授权 （已发 才有）
      authority() {
        const { authority, state } = this.slotData;
        if (authority === true && state === 2) {
          return 'icon-font xicon-authorize';
        } else {
          return '';
        }
      },
      collBodyType() {
        const { bodyType } = this.slotData;
        const bodyTypeArr = ['10', '30', 'HTML'];
        if (bodyType && !bodyTypeArr.includes(bodyType)) {
          const bodyTypeClass = this.convertPortalBodyType(bodyType);
          return bodyTypeClass;
        } else {
          return '';
        }
      }
    },
    created() {
      this.importantLevelText = {
        2: $.i18n('govdoc.quick.normal'),
        3: $.i18n('govdoc.quick.expedited'),
        4: $.i18n('govdoc.quick.express'),
        5: $.i18n('govdoc.quick.teti')
      };
    },
    methods: {
      convertPortalBodyType(bodyType) {
        let bodyTypeClass = 'html_16';
        if ('FORM' === bodyType || '20' === bodyType) {
          bodyTypeClass = 'green-color xicon-form-text';
        } else if ('TEXT' === bodyType || '30' === bodyType) {
          bodyTypeClass = 'txt_16';
        } else if ('OfficeWord' === bodyType || '41' === bodyType) {
          bodyTypeClass = 'office-word-icon xicon-word';
        } else if ('OfficeExcel' === bodyType || '42' === bodyType) {
          bodyTypeClass = 'office-excel-icon xicon-excel';
        } else if ('WpsWord' === bodyType || '43' === bodyType) {
          bodyTypeClass = 'wps-color xicon-wps';
        } else if ('WpsExcel' === bodyType || '44' === bodyType) {
          bodyTypeClass = 'wps-color xicon-excel';
        } else if ('Pdf' === bodyType || '45' === bodyType) {
          bodyTypeClass = 'pfd-color xicon-pdf';
        } else if ('Ofd' === bodyType || '46' === bodyType) {
          bodyTypeClass = 'ofd-color xicon-ofd';
        } else if ('videoConf' === bodyType) {
          bodyTypeClass = 'attachment-color xicon-meeting-video';
        }
        bodyTypeClass += ' icon-font';
        return bodyTypeClass;
      }
    }
  };
</script>

<style scoped lang="scss">
  .subject-render {
    width: 100%;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;
    position: relative;
    .left {
      width: 100%;
      position: relative;
      display: flex;
      .subject-render-title {
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .important-icon-color {
      color: #bf3a36;
    }
    .to-top-icon {
      position: absolute;
      display: none;
      right: 0;
      width: 25px;
    }
    &:hover .left {
      color: #318ed9;
      color: var(--theme-brand4, #318ed9);
    }
    .to-top-color {
      color: #4a9ff2;
      color: var(--theme-brand4, #4a9ff2);
    }
    .to-top-icon-color {
      display: none;
      color: #999999;
    }
    &:hover .to-top-icon {
      display: inline;
      cursor: pointer;
      color: #4a9ff2;
      color: var(--theme-brand4, #4a9ff2);
    }
    &:hover .to-top-icon-color {
      display: inline;
      cursor: pointer;
    }

    .attachment-color {
      color: #fe7a22;
    }

    .over-time {
      color: #fb4747;
    }

    .green-color {
      color: #67c13a;
    }

    .office-word-icon {
      color: #377ef0;
    }

    .office-excel-icon {
      color: #56a03d;
    }

    .wps-color {
      color: #11b5d2;
    }

    .pfd-color {
      color: #ff4608;
    }

    .ofd-color {
      color: #157efd;
    }

    .icon-font {
      font-weight: initial;
    }
  }
</style>
